<template>
  <div class="map-container">
    <!-- 地图容器 -->
    <div id="viewDiv"></div>

    <!-- 位置选择提示 -->
    <div class="location-selection-tip" v-if="isSelectingLocation">
      <el-alert title="请在地图上点击选择博物馆位置" type="warning" :closable="false" show-icon />
    </div>

    <!-- 右上角功能面板 -->
    <div class="control-panel">
      <el-card class="control-card">
        <template #header>
          <div class="card-header">
            <span>博物馆管理</span>
            <div class="water-drop"></div>
          </div>
        </template>

        <div class="control-buttons">
          <el-button
            type="primary"
            @click="startAddMuseum"
            class="museum-button"
            v-if="userStore.isAdmin()"
          >
            <el-icon><Plus /></el-icon> 添加博物馆
          </el-button>
          <el-button
            type="warning"
            @click="startEditMuseum"
            :disabled="!hasSelectedFeature"
            class="museum-button"
            v-if="userStore.isAdmin()"
          >
            <el-icon><Edit /></el-icon> 编辑博物馆
          </el-button>
          <el-button
            type="danger"
            @click="confirmDelete"
            :disabled="!hasSelectedFeature"
            class="museum-button"
            v-if="userStore.isAdmin()"
          >
            <el-icon><Delete /></el-icon> 删除博物馆
          </el-button>
          <el-button type="success" @click="navigateToMuseum" class="museum-button">
            <el-icon><Location /></el-icon> 导航到博物馆
          </el-button>
          <el-button type="info" @click="showFacilitiesPanel = true" class="museum-button">
            <el-icon><Location /></el-icon> 搜寻附近设施
          </el-button>
        </div>
        <div
          class="operation-tip"
          v-if="!hasSelectedFeature && !isAddingMuseum && userStore.isAdmin()"
        ></div>
        <div class="selected-info" v-if="hasSelectedFeature && !isEditing && !isAddingMuseum">
          <el-descriptions
            title="已选择博物馆"
            :column="1"
            border
            size="small"
            class="museum-descriptions"
          >
            <el-descriptions-item label="名称">{{
              selectedFeature!.attributes.MesumeName || '未知'
            }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{
              selectedFeature!.attributes.Addreess || '未知'
            }}</el-descriptions-item>
            <el-descriptions-item label="视频" v-if="selectedFeature!.attributes.Video">
              <video
                :src="selectedFeature!.attributes.Video"
                controls
                width="100%"
                height="150"
              ></video>
            </el-descriptions-item>
            <el-descriptions-item label="视频" v-else>
              <span>暂无视频</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>

    <!-- 添加/编辑博物馆表单对话框 -->
    <el-dialog
      v-model="showMuseumDialog"
      :title="isAddingMuseum ? '添加博物馆' : '编辑博物馆'"
      width="50%"
      destroy-on-close
    >
      <el-form :model="museumForm" label-width="120px" ref="museumFormRef" :rules="formRules">
        <el-form-item label="名称" prop="MesumeName">
          <el-input v-model="museumForm.MesumeName" placeholder="请输入博物馆名称"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="Addreess">
          <el-input v-model="museumForm.Addreess" placeholder="请输入博物馆地址"></el-input>
        </el-form-item>
        <el-form-item label="视频" prop="Video">
          <el-upload
            class="video-uploader"
            action=""
            :auto-upload="false"
            :show-file-list="false"
            accept="video/*"
            :on-change="handleVideoChange"
          >
            <div v-if="museumForm.Video" class="video-preview">
              <video :src="museumForm.Video" controls width="100%" height="200"></video>
              <div class="video-actions">
                <el-button type="danger" size="small" @click.stop="removeVideo">删除视频</el-button>
              </div>
            </div>
            <el-button v-else type="primary">
              <el-icon><Upload /></el-icon> 上传视频
            </el-button>
            <div class="el-upload__tip">请上传视频文件，大小不超过100MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="位置" v-if="isAddingMuseum">
          <div class="location-info">
            <el-tag v-if="newLocation" type="success">已选择位置</el-tag>
            <el-tag v-else type="warning">请在地图上点击选择位置</el-tag>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelMuseumOperation">取消</el-button>
          <el-button type="primary" @click="saveMuseum" :disabled="isAddingMuseum && !newLocation">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="showDeleteDialog" title="确认删除" width="30%">
      <span
        >确定要删除博物馆 "{{ selectedFeature?.attributes.MesumeName || '未知博物馆' }}"
        吗？此操作不可恢复。</span
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDeleteDialog = false">取消</el-button>
          <el-button type="danger" @click="deleteMuseum">确认删除</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 导航路线指引信息卡片 -->
    <!-- 附近设施面板 -->
    <div class="facilities-panel" v-if="showFacilitiesPanel">
      <el-card class="facilities-card">
        <template #header>
          <div class="card-header">
            <span>附近设施</span>
            <el-button type="text" @click="showFacilitiesPanel = false" class="close-button">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </template>

        <div class="facility-controls">
          <el-select v-model="selectedFacilityType" placeholder="请选择设施类型">
            <el-option
              v-for="item in facilityTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-slider v-model="searchRadius" :min="100" :max="5000" :step="100" />
          <span>搜索半径: {{ searchRadius }}米</span>
          <el-button type="primary" @click="searchNearbyFacilities">搜索</el-button>
        </div>

        <el-divider />

        <div class="facilities-list">
          <el-table :data="facilitiesList" height="300" style="width: 100%">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="distance" label="距离(米)" />
          </el-table>
        </div>
      </el-card>
    </div>

    <div class="route-details-panel" v-if="showRouteDetails">
      <el-card class="route-card">
        <template #header>
          <div class="card-header">
            <span>导航路线指引</span>
            <el-button type="text" @click="clearRoute" class="close-button">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </template>

        <div class="route-summary">
          <div class="route-info">
            <div class="info-item">
              <el-icon><Timer /></el-icon>
              <span>预计时间: {{ formatDuration(routeTime) }}</span>
            </div>
            <div class="info-item">
              <el-icon><Location /></el-icon>
              <span>总距离: {{ formatDistance(routeDistance) }}</span>
            </div>
          </div>
        </div>

        <el-divider content-position="center">路线指引</el-divider>

        <div class="route-instructions">
          <el-timeline>
            <el-timeline-item
              v-for="(instruction, index) in routeInstructions"
              :key="index"
              :type="getTimelineItemType(index)"
              :hollow="index !== 0 && index !== routeInstructions.length - 1"
              :timestamp="`步骤 ${index + 1}`"
            >
              {{ instruction }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { Plus, Edit, Delete, Upload, Close, Timer, Location } from '@element-plus/icons-vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import Query from '@arcgis/core/rest/support/Query.js'
import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol'
import museum from '@/assets/museum.png'
import { getGaoDeRoute, searchAround } from '@/utils/gaodeAPI'
import Polyline from '@arcgis/core/geometry/Polyline'
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'
import { useUserStore } from '@/stores/user'
import { vi } from 'element-plus/es/locale/index.mjs'
// 获取用户和博物馆信息存储
const userStore = useUserStore()
// 状态变量
const showMuseumDialog = ref(false)
const showDeleteDialog = ref(false)
const isAddingMuseum = ref(false)
const isNavigating = ref(false) // 导航状态
const isSelectingLocation = ref(false) // 是否正在选择位置状态
const isEditing = ref(false)
const hasSelectedFeature = ref(false) // 是否已选择要素的标志
let selectedFeature: Graphic | null = null
let newLocation: Point | null = null
let navigateToMuseumPoint: Point | null = null
const museumFormRef = ref<FormInstance | null>(null)
let museumPoint: Point | null = null
// 路线规划
const showRouteDetails = ref(false)
const routeGraphics: Graphic[] = []
const routeDistance = ref(0)
const routeTime = ref(0)
const routeInstructions = ref<string[]>([])

// 附近设施搜索
const showFacilitiesPanel = ref(true)
const facilitiesList = ref<any[]>([])
const facilityTypes = ref([
  { label: '餐饮', value: '050000' },
  { label: '购物', value: '060000' },
  { label: '生活服务', value: '070000' },
  { label: '休闲娱乐', value: '080000' },
  { label: '医疗', value: '090000' },
  { label: '酒店', value: '100000' },
  { label: '景点', value: '110000' },
  { label: '商务', value: '120000' },
  { label: '交通设施', value: '150000' },
  { label: '充电站', value: '011100' },
  { label: '地铁站', value: '150500' },
])
const selectedFacilityType = ref('050000')
const searchRadius = ref(1000)

// 表单数据
const museumForm = ref({
  MesumeName: '',
  Addreess: '',
  Video: '',
})

// 表单验证规则
const formRules = {
  MesumeName: [{ required: true, message: '请输入博物馆名称', trigger: 'blur' }],
  Addreess: [{ required: true, message: '请输入博物馆地址', trigger: 'blur' }],
}

// 地图和图层引用
let view: MapView | null = null
let museumLayer: FeatureLayer | null = null
let tempGraphic: Graphic | null = null

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (view) {
    view = null
  }
})

// 初始化地图
const initMap = () => {
  try {
    // 创建地图实例
    const map = new Map({
      basemap: {
        baseLayers: [gaodeLayer],
      },
    })

    // 创建地图视图
    view = new MapView({
      container: 'viewDiv',
      map: map,
      center: [116.3, 39.9], // 北京的经纬度
      zoom: 10,
    })

    // 创建博物馆要素图层
    museumLayer = new FeatureLayer({
      url: 'https://services3.arcgis.com/kFzM0Uae5lldoyeg/arcgis/rest/services/meseumPoint/FeatureServer/0',
      outFields: ['*'], // 获取所有字段
      renderer: {
        type: 'simple',
        symbol: new PictureMarkerSymbol({
          url: museum,
          width: 24,
          height: 24,
        }),
      },
    })

    // 添加图层到地图
    map.add(museumLayer)

    // 添加点击事件
    view.on('click', (event) => {
      if (isAddingMuseum.value && isSelectingLocation.value) {
        // 如果正在添加博物馆并且在选择位置状态，记录点击位置
        newLocation = view!.toMap(event)

        // 添加临时标记
        addTempMarker(
          new Point({
            x: newLocation.x,
            y: newLocation.y,
            spatialReference: view!.spatialReference,
          }),
        )

        // 选择位置后，显示表单对话框
        isSelectingLocation.value = false
        showMuseumDialog.value = true
        return
      }
      if (isNavigating.value) {
        // 如果正在添加博物馆并且在选择位置状态，记录点击位置
        navigateToMuseumPoint = view!.toMap(event)

        // 添加临时标记
        addTempMarker(
          new Point({
            x: navigateToMuseumPoint.x,
            y: navigateToMuseumPoint.y,
            spatialReference: view!.spatialReference,
          }),
        )
        isNavigating.value = false
        ShowNavigateRoute()
        return
      }
      // 如果不是添加模式，执行空间查询
      const query = new Query({
        geometry: event.mapPoint,
        distance: 100,
        units: 'meters',
        spatialRelationship: 'intersects',
        outFields: ['*'],
        returnGeometry: true,
      })

      // 执行查询
      museumLayer!
        .queryFeatures(query)
        .then((result) => {
          if (result.features.length > 0) {
            // 获取第一个匹配的要素
            selectedFeature = result.features[0]
            hasSelectedFeature.value = true // 设置已选择要素标志为true
            ElMessage.success(
              `已选择博物馆: ${selectedFeature.attributes.MesumeName || '未命名博物馆'}`,
            )
          } else {
            selectedFeature = null
            hasSelectedFeature.value = false // 设置已选择要素标志为false
            ElMessage.info('未找到博物馆')
          }
        })
        .catch((error) => {
          console.error('查询失败:', error)
          ElMessage.error('查询博物馆信息失败')
        })
    })
  } catch (error) {
    console.error('初始化地图失败:', error)
    ElMessage.error('初始化地图失败')
  }
}

// 添加临时标记
const addTempMarker = (location: Point) => {
  // 移除之前的临时标记
  if (tempGraphic && view) {
    view.graphics.remove(tempGraphic)
  }

  // 创建新的临时标记
  tempGraphic = new Graphic({
    geometry: location,
    symbol: new SimpleMarkerSymbol({
      color: [226, 119, 40],
      outline: {
        color: [255, 255, 255],
        width: 2,
      },
      size: 12,
    }),
  })

  // 添加到视图
  if (view) {
    view.graphics.add(tempGraphic)
  }
}

// 开始添加博物馆
const startAddMuseum = () => {
  isAddingMuseum.value = true
  isSelectingLocation.value = true // 设置为选择位置状态
  isEditing.value = false
  newLocation = null

  // 显示选择位置提示
  ElMessage.info('请在地图上点击选择博物馆位置')

  // 重置表单
  museumForm.value = {
    MesumeName: '',
    Addreess: '',
    Video: '',
  }
}

// 开始编辑博物馆
const startEditMuseum = () => {
  if (!selectedFeature) return

  isAddingMuseum.value = false
  isEditing.value = true
  showMuseumDialog.value = true

  // 填充表单数据
  const attrs = selectedFeature.attributes
  museumForm.value = {
    MesumeName: attrs.MesumeName || '',
    Addreess: attrs.Addreess || '',
    Video: attrs.Video || '',
  }
}

// 取消操作
const cancelMuseumOperation = () => {
  showMuseumDialog.value = false
  isAddingMuseum.value = false
  isSelectingLocation.value = false // 重置选择位置状态
  isEditing.value = false

  // 清除临时标记
  if (tempGraphic && view) {
    view.graphics.remove(tempGraphic)
  }
  newLocation = null
}

// 保存博物馆
const saveMuseum = async () => {
  if (!museumFormRef.value) return

  try {
    // 表单验证
    await museumFormRef.value.validate()

    // 准备属性数据
    const attributes: any = {
      MesumeName: String(museumForm.value.MesumeName),
      Addreess: String(museumForm.value.Addreess),
      Video: String(museumForm.value.Video),
    }

    if (isAddingMuseum.value) {
      // 添加新博物馆
      if (!newLocation || !museumLayer) {
        ElMessage.error('请先在地图上选择位置')
        return
      }

      // 创建新要素
      const newFeature = new Graphic({
        geometry: newLocation,
        attributes: attributes,
      })

      try {
        // 添加到图层
        const results = await museumLayer.applyEdits({
          addFeatures: [newFeature],
        })

        if (results.addFeatureResults && results.addFeatureResults.length > 0) {
          ElMessage.success('添加博物馆成功')
          // 清除临时标记
          if (tempGraphic && view) {
            view.graphics.remove(tempGraphic)
          }
        } else {
          ElMessage.error('添加博物馆失败')
        }
      } catch (error) {
        console.error('添加博物馆时出错:', error)
        ElMessage.error('添加博物馆失败')
      }
    } else if (isEditing.value) {
      // 编辑现有博物馆
      if (!selectedFeature || !museumLayer) {
        ElMessage.error('未选择博物馆')
        return
      }

      // 更新要素属性
      const updatedFeature = selectedFeature.clone()
      updatedFeature.attributes = {
        ...attributes,
        OBJECTID: selectedFeature.attributes.OBJECTID, // 保留原始ID
      }

      // 应用编辑
      const results = await museumLayer.applyEdits({
        updateFeatures: [updatedFeature],
      })

      if (results.updateFeatureResults.length > 0) {
        ElMessage.success('更新博物馆成功')
        selectedFeature = updatedFeature
      } else {
        ElMessage.error('更新博物馆失败')
      }
    }

    // 关闭对话框
    showMuseumDialog.value = false
    isAddingMuseum.value = false
    isEditing.value = false
    newLocation = null
  } catch (error) {
    console.error('保存博物馆失败:', error)
    ElMessage.error('表单验证失败，请检查输入')
  }
}

// 确认删除
const confirmDelete = () => {
  if (!selectedFeature) return
  showDeleteDialog.value = true
}

// 处理视频上传
const handleVideoChange = (file: any) => {
  const isVideo = file.raw.type.indexOf('video/') !== -1
  const isLt100M = file.raw.size / 1024 / 1024 < 100
  if (!isVideo) {
    ElMessage.error('只能上传视频文件!')
    return false
  }
  if (!isLt100M) {
    ElMessage.error('视频大小不能超过 100MB!')
    return false
  }

  // 将视频转换为base64
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    museumForm.value.Video = reader.result as string
  }
  return false
}

// 删除视频
const removeVideo = (e: Event) => {
  e.stopPropagation()
  museumForm.value.Video = ''
}

// 删除博物馆
const deleteMuseum = async () => {
  if (!selectedFeature || !museumLayer) {
    ElMessage.error('未选择博物馆')
    return
  }

  try {
    // 执行删除
    const results = await museumLayer.applyEdits({
      deleteFeatures: [selectedFeature],
    })

    if (results.deleteFeatureResults.length > 0) {
      ElMessage.success('删除博物馆成功')
      selectedFeature = null
      hasSelectedFeature.value = false // 重置已选择要素标志
    } else {
      ElMessage.error('删除博物馆失败')
    }

    // 关闭对话框
    showDeleteDialog.value = false
  } catch (error) {
    console.error('删除博物馆失败:', error)
    ElMessage.error('删除博物馆失败')
  }
}

const navigateToMuseum = async () => {
  clearRoute()
  isNavigating.value = true
  ElMessage.info('请在地图上点击选择起点位置')
  const query = new Query({
    where: `1=1`,
    outFields: ['*'],
    returnGeometry: true,
  })
  // 执行查询
  const result = await museumLayer!.queryFeatures(query)
  if (result.features.length > 0) {
    // 获取第一个匹配的要素
    museumPoint = result.features[0].geometry as Point
  }
}
// 格式化距离
const formatDistance = (distance: number): string => {
  if (distance >= 1000) {
    return `${(distance / 1000).toFixed(1)} 公里`
  }
  return `${distance} 米`
}

// 格式化时间
const formatDuration = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60)
  if (minutes >= 60) {
    const hours = Math.floor(minutes / 60)
    const remainingMinutes = minutes % 60
    return `${hours} 小时 ${remainingMinutes} 分钟`
  }
  return `${minutes} 分钟`
}

// 获取时间线项目类型
const getTimelineItemType = (index: number): string => {
  if (index === 0) return 'primary' // 起点
  if (index === routeInstructions.value.length - 1) return 'success' // 终点
  return 'warning' // 中间点
}

// 清除路线
const clearRoute = () => {
  // 清除路线图形
  if (view) {
    routeGraphics.forEach((graphic) => {
      view!.graphics.remove(graphic)
    })
  }

  // 重置路线数据
  routeGraphics.length = 0
  routeDistance.value = 0
  routeTime.value = 0
  routeInstructions.value = []
  showRouteDetails.value = false

  // 清除临时标记
  if (tempGraphic && view) {
    view.graphics.remove(tempGraphic)
  }

  navigateToMuseumPoint = null
  ElMessage.info('已清除导航路线')
}

// 修改 ShowNavigateRoute 函数
// 搜索附近设施
const searchNearbyFacilities = async () => {
  if (!selectedFeature || !view) {
    const query = new Query({
      where: `1=1`,
      outFields: ['*'],
      returnGeometry: true,
    })
    // 执行查询
    const result = await museumLayer!.queryFeatures(query)
    selectedFeature = result.features[0]
  }

  try {
    const location = `${(selectedFeature.geometry! as Point).longitude},${(selectedFeature.geometry! as Point).latitude}`
    const response = await searchAround(location, selectedFacilityType.value, searchRadius.value)

    if (response.pois && response.pois.length > 0) {
      facilitiesList.value = response.pois.map((poi: any) => ({
        name: poi.name,
        address: poi.address,
        distance: poi.distance,
      }))
      view?.graphics.removeAll()
      response.pois.forEach((poi: any) => {
        const point = new Point({
          longitude: poi.location.split(',')[0],
          latitude: poi.location.split(',')[1],
        })
        const pointGraphic = new Graphic({
          geometry: point,
          symbol: new SimpleMarkerSymbol({
            color: [226, 119, 40],
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
            size: 12,
          }),
        })
        view?.graphics.add(pointGraphic)
      })
      ElMessage.success(`找到${facilitiesList.value.length}个设施`)
    } else {
      facilitiesList.value = []
      ElMessage.info('未找到附近设施')
    }
  } catch (error) {
    console.error('搜索附近设施失败:', error)
    ElMessage.error('搜索附近设施失败')
  }
}

const ShowNavigateRoute = async () => {
  if (!navigateToMuseumPoint || !museumPoint) {
    ElMessage.error('导航点位置无效')
    return
  }

  try {
    // 调用高德路径规划API
    const routeResult = await getGaoDeRoute(
      `${navigateToMuseumPoint.longitude},${navigateToMuseumPoint.latitude}`,
      `${museumPoint.longitude},${museumPoint.latitude}`,
    )

    // 绘制路线
    if (routeResult && routeResult.route && routeResult.route.paths[0]) {
      const path = routeResult.route.paths[0]

      // 将路径点转换为二维数组
      const pathPoints = path.steps.flatMap((step) => {
        return step.polyline.split(';').map((point) => {
          const [lng, lat] = point.split(',').map(Number)
          return [lng, lat]
        })
      })

      // 创建路线图形
      const routeLine = new Graphic({
        geometry: new Polyline({
          paths: [pathPoints],
        }),
        symbol: new SimpleLineSymbol({
          color: [0, 122, 194, 0.8],
          width: 4,
        }),
      })
      view!.graphics.add(routeLine)
      routeGraphics.push(routeLine)

      // 提取路线指引信息
      routeInstructions.value = path.steps.map((step) => step.instruction)

      // 设置路线距离和时间
      routeDistance.value = Number(path.distance)
      routeTime.value = Number(path.duration)

      // 显示路线详情
      showRouteDetails.value = true
      ElMessage.success('路线规划成功')
    } else {
      ElMessage.error('路线规划失败，未获取到有效路径')
    }
  } catch (error) {
    console.error('路线规划失败:', error)
    ElMessage.error('路线规划失败，请稍后重试')
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

#viewDiv {
  width: 100%;
  height: 100%;
}

.location-selection-tip {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 300px;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 300px;
}

.control-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border: 1px solid #d4b78f;
  border-top: 6px solid #8b6b4c;
  overflow: hidden;
  backdrop-filter: blur(5px);
  position: relative;
}

.control-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23d4b78f" stroke-width="0.5" stroke-dasharray="5,5" /></svg>');
  opacity: 0.1;
  pointer-events: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  color: #5d4037;
  font-weight: bold;
  font-size: 18px;
  padding: 0 10px;
  font-family: 'Times New Roman', serif;
  letter-spacing: 1px;
}

.water-drop {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: #a1887f;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(161, 136, 127, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(161, 136, 127, 0.7);
  }
  70% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 0 10px rgba(161, 136, 127, 0);
  }
  100% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(161, 136, 127, 0);
  }
}

.control-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  padding: 0 10px;
}

.facilities-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  width: 400px;
}

.facilities-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border: 1px solid #d4b78f;
  border-top: 6px solid #8b6b4c;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.facility-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.facilities-list {
  margin-top: 10px;
}

.museum-button {
  position: relative;
  overflow: hidden;
  border: none;
  font-size: 14px;
  padding: 10px 0;
  color: #fff;
  z-index: 1;
  border-radius: 4px;
  font-family: 'Arial', sans-serif;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.museum-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
  z-index: -1;
}

.museum-button:hover::before {
  transform: translateX(100%);
}

.museum-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.museum-button[type='primary'] {
  background-color: #795548;
  border-left: 4px solid #4e342e;
}

.museum-button[type='warning'] {
  background-color: #b8860b;
  border-left: 4px solid #856609;
}

.museum-button[type='danger'] {
  background-color: #a1453f;
  border-left: 4px solid #7d332e;
}

.museum-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.operation-tip {
  margin: 10px 0;
  padding: 0 10px;
}

.operation-tip :deep(.el-alert) {
  border-radius: 6px;
  background-color: rgba(245, 241, 233, 0.7);
  border-left: 3px solid #d4b78f;
}

.selected-info {
  margin-top: 12px;
  padding: 0 10px;
}

.museum-descriptions {
  background-color: rgba(245, 241, 233, 0.5);
  border: 1px solid #e0d5c1;
}

.museum-descriptions :deep(.el-descriptions__header) {
  margin-bottom: 10px;
  color: #5d4037;
  font-size: 16px;
  position: relative;
  font-family: 'Times New Roman', serif;
  padding-left: 5px;
}

.museum-descriptions :deep(.el-descriptions__header)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  background-color: #8b6b4c;
}

.location-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.location-info :deep(.el-tag) {
  border-radius: 4px;
  padding: 6px 10px;
}

.location-info :deep(.el-tag--success) {
  background-color: rgba(121, 85, 72, 0.1);
  border-color: #795548;
  color: #5d4037;
}

.location-info :deep(.el-tag--warning) {
  background-color: rgba(184, 134, 11, 0.1);
  border-color: #b8860b;
  color: #856609;
}

.el-button + .el-button {
  margin-left: 0px;
}

.video-uploader {
  width: 100%;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
  padding: 10px;
}

.video-uploader:hover {
  border-color: #795548;
}

.video-preview {
  width: 100%;
  position: relative;
}

.video-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.el-upload__tip {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 8px;
  text-align: center;
}
/* 导航路线指引信息卡片样式 */
.route-details-panel {
  position: absolute;
  bottom: 40px;
  left: 20px;
  z-index: 10;
  width: 350px;
  max-height: 70vh; /* 增加最大高度 */
  overflow: hidden;
}

.route-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border: 1px solid #d4b78f;
  border-left: 6px solid #8b6b4c;
  overflow: hidden;
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  max-height: 70vh; /* 确保卡片也能适应最大高度 */
}

.route-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #5d4037;
  font-weight: bold;
  font-size: 16px;
  font-family: 'Times New Roman', serif;
  padding: 10px 15px; /* 增加内边距 */
}

.close-button {
  color: #a1887f;
  transition: color 0.3s;
}

.close-button:hover {
  color: #5d4037;
}

.route-summary {
  padding: 10px 15px; /* 增加内边距 */
}

.route-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5d4037;
}

.info-item .el-icon {
  color: #8b6b4c;
}

.route-instructions {
  max-height: 50vh; /* 增加指引区域的最大高度 */
  overflow-y: auto;
  padding: 0 15px 15px 15px; /* 增加内边距 */
  flex: 1; /* 让指引区域占据剩余空间 */
}

.route-instructions::-webkit-scrollbar {
  width: 6px;
}

.route-instructions::-webkit-scrollbar-track {
  background: rgba(245, 241, 233, 0.5);
  border-radius: 3px;
}

.route-instructions::-webkit-scrollbar-thumb {
  background: #d4b78f;
  border-radius: 3px;
}

.route-instructions::-webkit-scrollbar-thumb:hover {
  background: #8b6b4c;
}

.el-timeline-item {
  padding-bottom: 15px;
}

.el-timeline-item:last-child {
  padding-bottom: 0;
}
</style>
